﻿@using Recaptcha
@using xConnected.Common.Login
<script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'clean'
 };
 </script>
<form class="modal hide fade" id="RegisterDialog" style="display: none;">
    <div class="modal-header">  
        <div class="thumbnail" style="margin-top: 10px; margin-bottom: 10px">
            <h3 style="margin-left: 5px; margin-bottom: 5px; margin-top: 5px">@Login.Register</h3>
        </div>
    </div> 
    <div class="modal-body" data-bind="with: logOn.registerModel">
        <div class="alert alert-error" data-bind="visible: $root.logOn.registerErrorMessageVisible"><span data-bind="text: $root.logOn.registerErrorMessage"></span></div>
        <div class="row">
            <div class="control-group span4" data-bind="css: {'error': Email.isValid() == false }" >
                <label class="control-label" for="Email"><strong>@Login.Email *</strong></label>
                <div class="controls">
                    <input  type="text" class="span4" data-bind="value: Email, valueUpdate: 'afterkeydown'" tabindex="1" />
                    <span class="help-inline" data-bind="validationMessage: Email"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span4" data-bind="css: {'error': Username.isValid() == false }" >
                <label class="control-label" for="Username"><strong>@Login.Username *</strong></label>
                <div class="controls">
                    <input  type="text" class="span4" data-bind="value: Username, valueUpdate: 'afterkeydown'" tabindex="1" />
                    <span class="help-inline" data-bind="validationMessage: Username"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span4" data-bind="css: {'error': Password.isValid() == false }" >
                <label class="control-label" for="Password"><strong>@Login.Password *</strong></label>
                <div class="controls">
                    <input  type="password" class="span4" data-bind="value: Password, valueUpdate: 'afterkeydown'" tabindex="1" />
                    <span class="help-inline" data-bind="validationMessage: Password"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span4" data-bind="css: {'error': ConfirmPassword.isValid() == false }" >
                <label class="control-label" for="ConfirmPassword"><strong>@Login.ConfirmPassword *</strong></label>
                <div class="controls">
                    <input  type="password" class="span4" data-bind="value: ConfirmPassword, valueUpdate: 'afterkeydown', executeOnEnter: $root.logOn.register" tabindex="1" />
                    <span class="help-inline" data-bind="validationMessage: ConfirmPassword"></span>
                </div>
            </div>
        </div>
        <div class="alert alert-error" data-bind="visible: $root.logOn.captchaErrorMessageVisible"><span data-bind="text: $root.logOn.captchaErrorMessage"></span></div>
        <div data-bind="visible: $root.logOn.captchaVisible">
            <div class="alert alert-info">
            <small>We are sorry that we have to annoy you with this captcha. But this service was abused by spammers who used it for captcha breaking.</small>
            </div>
            @Html.Raw(Html.GenerateCaptcha())
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-info" data-bind="click: function() { $root.logOn.register(); }">@Login.Register</a>
        <a href="#" class="btn " data-bind="click: function() { $root.logOn.cancelRegister(); }">@Login.Cancel</a>
    </div>
</form>